<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情 · Top - 英皇乐理 在线模考平台</title>
    <link rel="shortcut icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/orderList.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <script type="text/javascript" th:src="@{/js/api.js}"></script>
    <script type="text/javascript" th:src="@{/js/orderList.js}"></script>
</head>
<body>

<div class="main-div">
    <div class="main-box">
        <div th:replace="~{commons::headerbar(active='productList')}"></div>
        <div class="content position" style="display: flex; justify-content: space-between">
            <div>
                当前位置：首页 > 我的订单
            </div>
        </div>
        <div class="order-list">
            <div class="order-box">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li th:class="${index == 0 ? 'layui-this' : ''}" data="" index="0">全部订单</li>
                        <li th:class="${index == 1 ? 'layui-this' : ''}" data="0" index="1">待支付</li>
                        <li th:class="${index == 2 ? 'layui-this' : ''}" data="2" index="2">待发货</li>
                        <li th:class="${index == 3 ? 'layui-this' : ''}" data="4" index="3">待收货</li>
                        <li th:class="${index == 4 ? 'layui-this' : ''}" data="3" index="4">已完成</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="lists">
                                <div style="text-align: center" th:if="${orderEntities.size() == 0}">
                                    <img th:src="@{/images/is-empty.png}" />
                                    <div style="padding: 40px; color: #ccc">暂无记录</div>
                                </div>
                                <div class="item" th:each="order : ${orderEntities}" >
                                    <div class="head">
                                        <div class="out-num">订单号：[[${order.outTradeNo}]]</div>
                                    </div>
                                    <div class="content">
                                        <div class="left">
                                            <div class="img" th:data-id="${order.productId}" th:onclick="|querySingle(this.getAttribute('data-id'))|">
                                                <img th:src="${order.fileEntities[0].filePath}">
                                            </div>
                                            <div class="name">[[${order.productName}]]</div>
                                            <div class="price">￥[[${order.actualPrice}]]</div>
                                            <div class="price" style="color: red">[[${order.tradeStatus == 0 ? '待付款' : (order.tradeStatus == 1 ? '交易超时' : (order.tradeStatus == 2 ? '待发货' : (order.tradeStatus == 3 ? '已完成' : (order.tradeStatus == 4 ? '待收货' : '已退款'))))}]]</div>
                                        </div>
                                        <div class="right">
                                            <a class="tag" th:if="${order.tradeStatus == 4}" th:data-id="${order.id}" th:onclick="|queryExpress(this.getAttribute('data-id'))|">
                                                查看物流
                                            </a>
                                            <a class="tag" th:if="${order.tradeStatus == 0}" th:data-id="${order.id}" th:onclick="|delOrder(this.getAttribute('data-id'))|">
                                                删除订单
                                            </a>
                                            <a class="tag" th:if="${order.tradeStatus == 4}" th:data-id="${order.id}" th:onclick="|queryReceiving(this.getAttribute('data-id'))|">
                                                确认收货
                                            </a>
                                            <a class="tag" th:if="${order.tradeStatus == 2}" th:data-id="${order.id}" th:data-productId="${order.productId}" th:onclick="|refund(this.getAttribute('data-id'), this.getAttribute('data-productId'))|">
                                                退款退货
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{commons::footerbar}"></div>
</div>
</body>
</html>